<template>
  <div class="edit-table">
    <table @dblclick="onDblclick">
      <tbody>
        <tr v-for="(item, row) in tableData" :key="row">
          <td
            v-for="(e, col) in item"
            :key="col"
            :class="{ selected: curTd === row + ',' + col }"
            @click="onClick(row, col)"
          >
            <el-input
              v-if="canEdit && curTd === row + ',' + col"
              v-model="tableData[row][col]"
              v-focus
              @blur="onBlur"
            ></el-input>
            <span v-else>{{ e }}</span>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="addRow">添加新行</button>
      <button @click="addCol">添加新列</button>
      <button @click="deleteRow">删除行</button>
      <button @click="deleteCol">删除列</button>
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      // 指令的定义
      inserted(el) {
        // 聚焦元素
        el.querySelector('input').focus()
      },
    },
  },
  data() {
    return {
      curProperty: '',
      curTd: '',
      canEdit: false,
      preCurTd: '', // 失焦时 curTd 值为空，这时删除会读不到值，因此用这个变量来代替，用于删除行列
    }
  },
  computed: {
    tableData() {
      return this.$store.state.curComponent.propValue.data
    },
  },
  methods: {
    onDblclick() {
      this.canEdit = true
    },

    onClick(row, col) {
      this.curTd = `${row},${col}`
      this.preCurTd = this.curTd
    },

    onBlur() {
      this.canEdit = false
      this.curTd = ''
    },

    deleteRow() {
      if (!this.preCurTd) {
        this.$message.error('请先选择要删除的行')
        return
      }

      const row = this.preCurTd.split(',')[0]
      this.tableData.splice(row, 1)
    },

    addRow() {
      this.tableData.push(new Array(this.tableData[0]?.length || 1).fill(' '))
    },

    addCol() {
      if (this.tableData.length) {
        this.tableData.forEach((item) => item.push(' '))
      } else {
        this.tableData.push([' '])
      }
    },

    deleteCol() {
      if (!this.preCurTd) {
        this.$message.error('请先选择要删除的列')
        return
      }

      const col = this.preCurTd.split(',')[1]
      this.tableData.forEach((item) => {
        item.splice(col, 1)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.edit-table {
  overflow: auto;
  margin-bottom: 8px;

  & > div {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    button {
      cursor: pointer;
      background: #fff;
      border: 1px solid #dcdfe6;
      color: #606266;
      text-align: center;
      box-sizing: border-box;
      outline: 0;
      margin: 0;
      font-weight: 500;
      padding: 4px 10px;
      font-size: 14px;
      border-radius: 4px;
      margin-bottom: 10px;

      &:hover {
        background: #ecf5ff;
        color: #409eff;
      }
    }
  }

  table {
    border-collapse: collapse;
    word-break: break-all;
    word-wrap: break-word;
    text-align: center;
    font-size: 12px;

    td {
      border: 1px solid #ebeef5;
      height: 40px;
      min-width: 60px;
      max-width: 80px;
      padding: 10px;
    }
  }

  .selected {
    background: #ecf5ff;
    color: #409eff;
  }
}
</style>
